﻿<template>
  <!-- swiper -->
  <div class="swiper_cover">
      <swiper :options="swiperOption">
        <swiper-slide class="box" style="margin-left:1vw;opacity:0;">
        </swiper-slide>
        <swiper-slide v-for="slider in slider_list">
            <!--v-for="box in card_mess"-->
            <div class="box" ref="box" style="margin-right:6px;">
              <img v-bind:src="slider.image|img_address" class="box_header_img" v-if="!header_sel" v-on:click.self="goto_box(slider.id,index)"/>
              <img v-bind:src="slider.backgroundImage|img_address" class="box_header_img" v-if="header_sel" />
              <div class="card_title_new_scroll">
                {{slider.character}}
              </div>
            </div>
          </swiper-slide>
        <swiper-slide class="box" style="opacity:0;">
        </swiper-slide>
          <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
  </div>
</template>
<script>
  import 'swiper/dist/css/swiper.css'
  import common from "../../common/common.js"
  import { mapState, mapMutations, mapActions, mapGetters } from 'vuex';
  import { Toast, Indicator } from 'mint-ui';
  import "../../filter/filter.js";
  var qs = require('qs');

  import { swiper, swiperSlide } from 'vue-awesome-swiper'

  export default {
    data() {
      return {
        swiperOption: {
          slidesPerView: 3,
          spaceBetween: 20,
          pagination: {
            el: '.swiper-pagination',
            clickable: true
          },
          onSlideChangeEnd: (swiper) => {
            let id = this.slider_list[swiper.activeIndex].character;
            this.change_get_mess(id);
          },
        },
        slider_list: [{}, {}, {}, {}],
      }
    },
    methods:{
      change_get_mess: function (id) {
        this.$emit('get_data_scroll',id)
      },
      goto_box: function (id) {
        Indicator.open();

        //当前显示的id
        sessionStorage.setItem("nav_id", id);
        //现在的冒险卡
        sessionStorage.setItem("now_List", JSON.stringify(this.msg));

        this.$store.dispatch("thom_redirect",
          { name: "/Adventure_visit", router: this.$router });

      }
    },
    mounted: function () {
      this.slider_list = this.msg;
      this.$emit('get_data_scroll', this.msg[0].character);
    },
    props: ["msg","header_sel"],
    components: {
      swiper,
      swiperSlide
    }
  }
</script>

<style scoped>
    .swiper-container{
    
      padding-top:1.5vw;
    }
/* change act next slider s*/
  .swiper-slide-next {
    transform: translate(-6%,-2%)
  }
  .swiper-slide-next .box {
    /*transition: 0.8s all cubic-bezier(.45,1,.23,1.52);*/
    margin-top:1vw;
  }
  .swiper-slide-next .box {
    width: 30vw;
    height: 40vw;
  }
/*change act next silder e*/
  .swiper_cover {
    width: 94vw;
    height:43vw;
    overflow: hidden;
  } 
  .box_list_title {
    height: 4vw;
    line-height: 4vw;
    font-weight: 600;
  }

  .box_list_qus {
    width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    height: 4vw;
    margin-top: 2vw;
  }
  /*box_header_img s*/

  .box_header_img {
    display: block;
    height: 100%;
    border-radius: 1vw 1vw 0 0;
  }

  .card_header {
    margin-top: 4vw;
  }

  .card_wrapper_box {
    margin-top: 4vw;
  }

  .box_header_img {
    width: 100%;
  }
  /*box_header_img e*/
  .wrapper_c {
    position: relative;
  }

  .move_l img {
    width: 4vw;
    display: block
  }

  .move_r img {
    width: 4vw;
    display: block
  }

  .move_l {
    position: absolute;
    left: 1vw;
    font-size: 50px;
    color: #333;
    z-index: 100;
    top: 14vw;
  }

  .move_r {
    right: 3vw;
    position: absolute;
    font-size: 50px;
    color: #333;
    z-index: 50;
    top: 14vw;
  }

  .wapper_lsit {
    height: 100%;
    white-space: nowrap;
    float: left;
    overflow: hidden;
  }

  .wrapper {
    width: 85vw;
    height: 44vw;
    overflow: hidden;
    padding-top: 2.6vw;
    margin: 0 auto;
  }

  .box {
    font-size: 3vw;
    /*border: 1px solid #9f5c2f;*/
    border-radius: 1vw;
    float: left;
    width: 26vw;
    height: 37vw;
    margin-top: 0.4rem;
    /*border:2px solid #ff6a00;*/
    background-color: #fff;
    white-space: normal;
    position: relative;
    box-shadow: 0px 0px 10px 2px #918d8d7a;
    /*margin-right:2vw;*/
  }

  .card_title_new_scroll {
    font-size: 4vw;
    width: 2vw;
    top: 50%;
    left: 50%;
    color: #9f5c2f;
    transform: translate(-50%,-50%);
    position: absolute;
    font-weight: 600;
  }

  .box_act {
    margin-top: 0;
    width: 30vw;
    /*height:100%;*/
    height: 40vw;
  }

  .card_wrapper {
    overflow: hidden;
  }
</style>
